<template>
  <div id="tableContainer" style="height: inherit;">
    <el-table
      ref="table"
      height="100%"
      :data="data"
      border
      highlight-current-row
      :header-cell-style="{ 'background-color': '#fafafa' }"
      :row-class-name="tableRowClassName"
    >
      <!-- <el-table
      ref="table"
      height="100%"
      :data="data"
      border
      highlight-current-row
      :header-cell-style="{ 'background-color': '#fafafa' }"
      :row-class-name="tableRowClassName"
      @cell-dblclick="tabClick"
    > -->
      <el-table-column
        width="40"
        type="index"
        fixed="left"
        align="center"
        class-name="light"
      />
      <el-table-column
        v-for="index in data[0].length"
        :key="index"
        width="120"
        :label="index.toString()"
        :prop="(index-1).toString()"
        align="right"
        header-align="center"
      >
        <!-- <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel == index">
            <el-input
              v-model="scope.row[index]"
              v-focus
              size="medium"
              @blur="inputBlur(scope.row[index])"
            />
          </span>
          <span v-else>{{ scope.row[index-1] }}</span>
        </template> -->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { debounce } from 'lodash-es';
export default {
  name: 'MatrixView',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      resizeObserver: null
      // tabClickIndex: null,
      // tabClickLabel: ''
    };
  },
  created() {
    this.debouncedResize = debounce(this.containerResize, 300);
  },
  mounted() {
    const rowHeight = 40;
    const columnWidth = 120;
    const container = document.getElementById('tableContainer');
    if (container) {
      const resizeObserver = new ResizeObserver(this.debouncedResize);
      resizeObserver.observe(container);
      this.resizeObserver = resizeObserver;
      const containerWidth = container.offsetWidth;
      const containerHeight = container.offsetHeight;
      this.addEmptyRC(rowHeight, columnWidth, containerHeight, containerWidth);
    }
  },
  beforeDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  },
  methods: {
    tabClick(row, column, cell, event) {
      this.tabClickIndex = row.index;
      this.tabClickLabel = column.label;
    },
    // 失焦
    inputBlur(row) {
      this.tabClickIndex = null;
      this.tabClickLabel = '';
    },
    // add
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 填充空白的行和列
    addEmptyRC(rowHeight, columnWidth, containerHeight, containerWidth) {
      let columnMore;
      let rowMore;
      if (this.data[0].length * columnWidth + 40 < containerWidth) {
        columnMore = Math.ceil((containerWidth - (this.data[0].length * columnWidth + 40)) / columnWidth);
      } else {
        columnMore = 0;
      }
      if (rowHeight * (this.data.length + 1) < containerHeight) {
        rowMore = Math.ceil((containerHeight - (rowHeight * (this.data.length + 1))) / rowHeight);
      } else {
        rowMore = 0;
      }
      for (const row of this.data) {
        for (let count = 0; count < columnMore; count++) {
          row.push(undefined);
        }
      }
      for (let rCount = 0; rCount < rowMore; rCount++) {
        this.data.push(new Array(this.data[0].length));
      }
    },
    containerResize(e) {
      const rowHeight = 40;
      const columnWidth = 120;
      const container = e[0].target;
      if (container) {
        const containerWidth = container.offsetWidth;
        const containerHeight = container.offsetHeight;
        this.addEmptyRC(
          rowHeight,
          columnWidth,
          containerHeight,
          containerWidth
        );
      }
    }
  }
};
</script>
